<template>
	<view class="container">
		<div class="tobg">
			<image src="/static/img/agent/addbg.png" mode=""></image>
		</div>

		<view class="list">
			<view class="list-item">
				<text>*开户名称</text>
				<input type="text" value="" v-model="person" placeholder="请输入" />
			</view>
			<view class="list-item">
				<text>*开户行名称</text>
				<input type="text" value="" v-model="bank_name" placeholder="请输入" />
			</view>
			<view class="list-item">
				<text>*银行账号</text>
				<input type="number" value="" v-model="bank_number" placeholder="请输入" />
			</view>
			<view class="list-item">
				<text>*开户支行</text>
				<input type="text" value="" v-model="bank_address" placeholder="请输入" />
			</view>
		</view>

		<view class="btn">
			<div class="submitbtn" @click="submit">立即添加</div>
		</view>
	</view>
</template>

<script>
import { bankDetail, bank } from '../../../api/api.js'
export default {
	data() {
		return {
			person: '',
			bank_name: '',
			bank_number: '',
			bank_address: ''
		}
	},
	onLoad() {
		this.getBankInfo()
	},
	methods: {
		getBankInfo() {
			bankDetail().then(res => {
				console.log(res)
				if (res.data) {
					this.card = true
					this.person = res.data.realname
					this.bank_name = res.data.bank
					this.bank_number = res.data.bank_card
					this.bank_address = res.data.bank_name
				} else {
					this.card = false
				}
			})
		},
		submit() {
			if (!this.person) {
				uni.showToast({
					icon: 'none',
					title: '请输入持卡人信息'
				})
				return
			}
			if (!this.bank_name) {
				uni.showToast({
					icon: 'none',
					title: '请输入银行名称'
				})
				return
			}
			if (!this.bank_number) {
				uni.showToast({
					icon: 'none',
					title: '请输入银行卡号'
				})
				return
			}
			if (!this.bank_address) {
				uni.showToast({
					icon: 'none',
					title: '请输入开户行信息'
				})
				return
			}
			// 绑定银行卡
			bank({
				realname:this.person,
				bank:this.bank_name,
				bank_card: this.bank_number,
				bank_name:this.bank_address
			}).then(res=>{
				if(res.code == 1){
					uni.switchTab({
						url:'/pages/agent/user'
					})
				}
			})
			
		}
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background: #F7F7F7;
		.tobg{
			width: 100%;
			height: 104px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.list {
			width: 100%;
			background: url('../../../static/img/agent/ygbg.png') no-repeat center;
			background-size: 100% 100%;
			position: absolute;
			top: 20px;
			// left: calc((15% - 52px) / 2);
			padding: 26px;
		
			.list-item {
				width: 100%;
				height: 50px;
				line-height: 80upx;
				padding: 10upx 0;
				display: flex;
				justify-content: space-between;
				// border-bottom: 1upx solid #ECECEC;
		
				input {
					width: 203px;
					height: 44px;
					// text-align: right;
					border: 1px solid #F6F6F6;
					background: #FFFFFF;
					border-radius: 6px;
					padding-left: 10px;
				}
			}
		}
		
		.btn {
			width: calc(100% - 60upx);
			margin: 240px auto 0 auto;
			height: 90upx;
			.submitbtn {
				width: 100%;
				height: 100%;
				height: 90upx;
				background: linear-gradient(311deg, #93A4FB 0%, #2F9AFE 100%);
				box-shadow: 0px 2px 6px 0px rgba(20,135,255,0.4);
				border-radius: 22px;
				color: #FFFFFF;
				line-height: 90upx;
				text-align: center;
				font-size: 17px;
			}
		}
	}
</style>
